<ul class="nav nav-tabs card-header-tabs">
    <li class="nav-item me-2">
        <a class="nav-link{% if active_page == 'failed' %} active{% endif %}" href="./failed">Files</a>
    </li>
    <li class="nav-item me-2">
        <a class="nav-link{% if active_page == 'queue' %} active{% endif %}" href="./queue">
            Queue
            <span id="queueSize" class="badge text-bg-secondary">0</span>
        </a>
    </li>
    <li class="nav-item me-2">
        <a class="nav-link{% if active_page == 'settings' %} active{% endif %}" href="./settings">Settings</a>
    </li>
    <li class="nav-item dropdown me-2">
        <a id="theme-icon-active" class="nav-link dropdown-toggle d-flex align-items-center" href="#" data-bs-toggle="dropdown" aria-expanded="false">
            <i class="bi bi-circle-half me-2"></i>
        </a>
        <ul class="dropdown-menu">
            <li>
                <a class="dropdown-item" href="#" data-bs-theme-value="light">
                    <i class="bi bi-brightness-high-fill me-2"></i>
                    Light
                </a>
            </li>
            <li>
                <a class="dropdown-item" href="#" data-bs-theme-value="dark">
                    <i class="bi bi-moon-stars-fill me-2"></i>
                    Dark
                </a>
            </li>
            <li>
                <a class="dropdown-item" href="#" data-bs-theme-value="auto">
                    <i class="bi bi-circle-half me-2"></i>
                    Auto
                </a>
            </li>
        </ul>
    </li>
</ul>
